<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/>
</head>

<style>
    .index_image{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
    }

    .image_button{
        position: absolute;
        margin-bottom: 15px;
        margin-left: 30px;
    }
</style>

<body>
<div class="layui-tab page-content-wrap">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form"  style="width: 90%">
                {% csrf_token %}
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">ID：</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" disabled autocomplete="off" class="layui-input" value={{id}}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img index_image" src="{{url}}" id="image_link">
                                <button type="button" class="layui-btn image_button" id="image" style="bottom: 0px">上传图片</button>
                                <p id="progress_bar"></p>
                            </div>
                            <div style="width: 100%;margin-top: 10px">
                                <div class="layui-progress" lay-showpercent="yes" lay-filter="progress">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 10px;"></div>
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">登录账号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" disabled autocomplete="off" class="layui-input" value={{account}}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"  lay-verify="username" autocomplete="off" class="layui-input" value={{name}}>
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">性别：</label>
                    <div class="layui-input-block">
                        <input id="boy" type="radio" name="sex" value="男" title="男">
                        <input id="woman" type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址：</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" lay-verify="required" placeholder="请输入住址" autocomplete="off" class="layui-input" value={{address}}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话：</label>
                    <div class="layui-input-block">
                        <input type="text" name="tell" lay-verify="phone" placeholder="请输入电话" autocomplete="off" class="layui-input" value={{tell}} >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱：</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" value={{email}}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="adminInfo" style="margin-top: 30px;width: 45%">保存</button>
                        <button id="cancel" type="button" class="layui-btn" style="margin-top: 30px;width: 45%;float:right">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form','element','upload','layer'], function() {
        var form = layui.form
            ,$ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;

        form.verify({
            required: function(value){
                if(value.length < 5){
                    return '地址长度不得小于5';
                }
            }
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        form.on('submit(adminInfo)', function(data){
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});

            $.ajax({
                url: 'single.html',
                type: 'POST',
                data:{'key': 'user_submit','base':data.field},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('资料修改成功！', {icon: 1});
                        //下面为跳出iframe框架的页面跳转
                        setTimeout("window.parent.location.reload();", 1500 )
                    }else {
                        layer.close(index);
                        layer.msg('密码和确认密码不一致！', {icon: 2});
                    }
                }
            })
            return false;
        });

        $("#cancel").click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);//关闭当前页
        })

        var uploadInst = upload.render({
            elem: '#image'
            ,url: '/image_upload' //改成您自己的上传接口
            ,size: 120 //限制文件大小，单位 KB
            ,extz:'jpg|png|jpeg'
            ,headers:{'X-CSRFtoken':$.cookie('csrftoken')}
            ,before: function(obj){
                this.data = {
                    id: "{{id}}",
                }
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#image_link').attr('src', result); //图片链接（base64）
                });

                element.progress('progress', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#progress_bar').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#progress_bar');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs progress-reload">重试</a>');
                demoText.find('.progress-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem,e){
                element.progress('progress', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1,time: 1300});
                }
            }
        });
    });
</script>
<script>
    var data = '{{gender|safe}}'
    if (data=='男'){
        $("#boy").attr('checked','');
    }else {
        $("#woman").attr('checked','');
    }
</script>
</body>
</html>